<template>
    <h3> 条件渲染</h3>
    <!-- v-if 控制标签是否渲染，为 true 渲染，为 false 不渲染 -->
    <div v-if="flag">这是 v-if 为 true 会显示的内容</div>
    <!-- v-else 搭配 v-if 使用，当 v-if 为 true 时不执行，为 false 时则执行 -->
    <div v-else>这是上面的 v-if 为 false 时显示的 else 的内容</div>

    <!-- v-else-if 搭配 v-if 使用，类似于 python 中的 elif -->
    <div v-if="type == 'A'">A</div>
    <div v-else-if="type == 'B'">B</div>
    <div v-else-if="type == 'C'">C</div>
    <div v-else>都不是</div>

    <!-- v-show 控制标签是否显示，为 true 显示，为 false 隐藏 -->
    <div v-show="flag">这是 v-show 为 true 会显示的内容，否则则【隐藏】，切换标签的 display 属性</div>

    <hr>

    <strong>讲解：</strong>
    <div>v-if 是真实的切换，会创建或销毁标签，创建或销毁的开销较大；v-show 通过修改 CSS 实现，初始的渲染开销较大，因此，当需要频繁删除添加时建议使用 v-show ，如果在运行时条件很少改变，可以使用 v-if
    </div>
</template>



<script>

export default {
    data() {
        return {
            flag: true,
            type: "A"
        }
    }
}
</script>